<template>
  <div class="StudentList">
    <!-- 查询 重置 功能 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
      <el-form-item label="姓名">
        <el-input v-model="formInline.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 分页  1: 1-10 2:11-20 slice((当前页数-1)*每页条数,当前页数*当前条数) -->
    <!-- <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" border style="width: 100%"> -->
      <el-table :data="compData" border style="width: 100%" :tooltip-effect="'dark'">
        <el-table-column prop="name"  label="姓名" align="center" width="100px"></el-table-column>
        <el-table-column prop="sex_text"  label="性别" align="center" width="60px"></el-table-column>
        <el-table-column prop="age"  label="年龄" align="center" width="60px"></el-table-column>
        <el-table-column prop="number"  label="学号" align="center" width="60px"></el-table-column>
        <el-table-column prop="class"  label="班级" align="center" width="60px"></el-table-column>
        <el-table-column prop="state_text"  label="状态" align="center" width="80px"></el-table-column>
        <el-table-column prop="address"  label="地址" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="phone"  label="联系方式" align="center" width="120px"></el-table-column>
        <el-table-column  label="操作" align="center" width="60px">
           <template slot-scope="scope">
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="del(scope.row)"></el-button>
           </template>
        </el-table-column>
      </el-table>
      {{ compData.length}}
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 30,50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
     </el-pagination>
  </div>
</template>
<script>
// 报错  name 的问题  一般是 标签闭合错了  还有就是 标签写错了
import {students,studentsDel} from '@/api/api.js'
export default{
  name:'StudentList',
  data(){
    return{
      tableData: [],
      currentPage:1,  // 当前页数
      pageSize:10,    // 每页显示条数
      total:0,        // 总条数
      formInline:{
        name:''
      }
    }
  },
  created(){
     this.getStuData();
     console.log('this',this);  // this 里面有  compData属性 并且里面有值 获取不到
     console.log('compData',this.compData);  // []
     this.$nextTick(()=>{
        console.log('compDataCreated=',this.compData);   // []
     })
  },
  mounted(){
     console.log('compDataMounted=',this.compData);   // []
  },
  computed:{
    compData(){
       return this.tableData.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
    }
  },
  methods:{
     // 分页  1: 1-10 2:11-20 slice((当前页数-1)*每页条数,当前页数*当前条数)
     // 改变每页显示几条
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.currentPage = 1;
     },
     // 改变页数 第几页
     handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
     },
     async getStuData(params){
      const res =await students(params)
      if(res.data.status === 200){
        this.tableData = res.data.data
        this.total = res.data.total;
        this.tableData.forEach(item=>{
          // 尽量不要修改接口返回的原数据
          item.sex === 1? item.sex_text = '男':item.sex_text = '女'
          item.state === '1'?(item.state_text='已入学') :item.state === '2' ? (item.state_text = '未入学'):(item.state_text = '休学中')
        })
       }
     },
     async del(row){
        const res = await studentsDel(row.id)
        if(res.data.status === 200){
          this.$message({ message:'删除数据成功',type:'success'})
          this.getStuData();
        }
     },
     // 查询
     query(){
        // 当显示最后一页时  如果查询的数据是 前面页里面的数据  没有this.currentPage = 1; 会查不到数据  查询的时候重置到第一页
        this.currentPage = 1;
        console.log('formInline',this.formInline);
        this.getStuData(this.formInline) 
     },
     reset(){
       this.formInline ={}
       this.getStuData(this.formInline) 
     }
  }
}

</script>


<style lang="scss" scoped>
.StudentList{
.el-pagination{
    margin-top:20px;
  }
}
</style>